<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05元素样式操作</title>
		<!-- 元素样式操作：针对css样式的属性和属性值 
		css()  功能：添加任何样式下的属性和属性值
		      1个参：获取匹配集合元素中第一个元素的css属性值
			  2个参：设置匹配元素集合元素中所有元素的属性和属性值
			  n个参：多层设置匹配元素集合元素中所有元素的属性和属性值
			  语法堂：css({"属性"："属性值"，"属性"："属性值"})
			  .btn{
				  border:1px solid red;
			  }
		height()和width() 功能：匹配集合元素中第一个元素的高度和宽度值
		                 无参：获取集合元素中第一个元素的高度和宽度值
						 有参：设置集合元素中第一个元素的高度和宽度值
		outHeight()和outWidth()功能：元素的宽高度
		                             无参：获取元素宽高度，包含内边距+边框
									 有参：只允许传bool值，true获取元素宽高度，包含内边距+边框+外边距
									                     
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.box{
				background-color: aqua;
				margin: 20px;
				padding: 20px;
				border: 5px solid red;
				width: 50px;
				height: 50px;
			}
			.result{
				margin-top: 10px;
				font-weight: 700;
				
			}
		</style>
	</head>
	<body>
		<!-- 显示效果区 -->
		<div class="box" id="targetbox">
			
		</div>
		<button id="getColorBtn">获取背景颜色</button>
		<button id="setColorBtn">设置背景颜色</button>
		<button id="setBtn">设置多层效果</button>
		<button id="getWidthBtn">获取元素宽</button>
		<button id="gbpBtn">获取元素高度【包含：内边距，边框】</button>
		<button id="gbqBtn">获取元素高度【有参】</button>
		<!-- 显示效果提示区 -->
		<div class="result" id="result">
			
		</div>
		<script>
			/* 1. */
			$("#getColorBtn").click(function(){
				//jq css("属性名") 获取属性值
				var bgColor=$(".box").css("background-color");
				//显示区域--提示：获取的颜色属性值
				$("#result").text("获取背景颜色值是：" + bgColor);
			});
			/* 2. */
			$("#setColorBtn").click(function(){
				$(".box").css("background-color","orange")
				$("#result").text("效果修改为橙色")
			});
		/* 3. */
		$("#setBtn").click(function(){
			$(".box").css({
			"background-image":"url(../img/xixi.png)"
			"border-radius":"50%",
			"box-shadow":"5px 5px 10px #ff0",
			"background-size":"100% 100%"
			});
		})
		/* 4. */
		$("#getWidthBtn").click(function(){
			var w=$(".box").width();
			$("#result").text("获取宽度是"+w)
		});
		/* 5. */
		$("#gbpBtn").click(function(){
			var h=$(".box").outerHeight();
			$("#result").text("高度为"+h)
		});
		/* 6. */
		$("#gbqBtn").click(function(){
			var j=$(".box").outerHeight(true);
			$("#result").text("高度为"+j)
		});
		</script>
	</body>
</html>